<template>
  <view class="container">
    <image class="logo" src="https://sp4-lanqiao-shop-vue.netlify.app/img/lanqiao-logo.5de12f2e.svg" alt="" style=""></image>
    <input class="input" type="text" placeholder="请输入手机号" v-model="phone">
    <input class="input" type="password" placeholder="请输入密码" v-model="password">
    <input class="input" type="password" placeholder="确认密码" v-model="confirmPassword">
    <button class="register-button" @click="register">注册</button>
    <navigator class="login-link" >已有账号去登录</navigator>
  </view>
</template>

<script>
import config from '../config.js';
export default {
  data() {
    return {
      phone: '',
      password: '',
      confirmPassword: ''
    };
  },
  methods: {
    register() {
      if (this.phone=='') {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        });
        return;
      } else if (this.password==''||this.password.length<6) {
        uni.showToast({
          title: '请输入密码，密码最低为6位',
          icon: 'none'
        });
        return;
      } else if (this.confirmPassword=='') {
        uni.showToast({
          title: '请确认密码',
          icon: 'none'
        });
        return;
      } else if (this.password!== this.confirmPassword) {
        uni.showToast({
          title: '两次输入的密码不一致',
          icon: 'none'
        });
        return;
      }

      // 发送POST请求到服务器保存用户信息
      uni.request({
        url: config.api_host+'/users',
        method: 'POST',
        data: {
          phone: this.phone,
          password: this.password
        },
        success: (res) => {
          if (res.statusCode === 201) {
            uni.showToast({
              title: '注册成功,请登录',
              icon:'success', // 设置图标为成功图标
              duration: 2000 // 设置提示显示时长为2秒
            });
            // 注册成功后跳转到登录页面
             setTimeout(() => {
              uni.navigateTo({
                url: '/pages/login/login'
              });
            }, 3000);
           
          } else {
            uni.showToast({
              title: '注册失败',
              icon: 'none'
            });
          }
        },
        fail: (err) => {
          console.error('注册失败:', err);
          uni.showToast({
            title: '注册失败，请稍后重试',
            icon: 'none'
          });
        }
      });
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 850px;
  background-color: #fff;
}

.logo {
    width: 120px;
    height: 120px;
    margin-bottom: 30px;
}

.input {
  width: 60%;
  padding: 12px 15px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}

.register-button {
  width: 60%;
  padding: 12px 15px;
  background-color: #007BFF;
  border: none;
  color: white;
  cursor: pointer;
  border-radius: 5px;
  font-size: 16px;
  margin-bottom: 15px;
}

.login-link {
  text-decoration: none;
  color: #666;
}
</style>    